<template>
  <Card>
    <p slot="title">测试报告</p>
    <div slot="extra">
      <Button type="primary" style="margin-right:8px;" @click="handleSelect">查询</Button>
      <Button style="margin-right:8px;" @click="handleReset">重置</Button>
    </div>
    <div style="margin-bottom: -28px">
      <Form ref="FormInline" :model="selectForm" inline :label-width="80" @submit.native.prevent>
        <FormItem label="用例名称">
          <Input v-model="selectForm.name" placeholder="请输入" @keyup.enter.native="handleSelect"/>
        </FormItem>
        <FormItem label="所属版本">
          <Select v-model="selectForm.version" style="width: 240px">
            <Option v-for="item in versionList" :value="item.name" :key="item.key">{{ item.name }}</Option>
          </Select>
        </FormItem>
        <FormItem label="请求接口">
          <Select v-model="selectForm.interface" style="width: 240px">
            <Option v-for="item in versionList" :value="item.name" :key="item.key">{{ item.name }}</Option>
          </Select>
        </FormItem>
        <FormItem label="创建人员">
          <Select v-model="selectForm.create_user" style="width: 240px">
            <Option v-for="item in versionList" :value="item.name" :key="item.key">{{ item.name }}</Option>
          </Select>
        </FormItem>
      </Form>

    </div>
    <Divider/>
    <div style="margin-top: -16px;margin-bottom: 8px;">
      <div style="text-align: right;margin-right: 40px">
        <Icon type="md-hand" style="font-size: 20px;color: mediumseagreen"/>
        通过
        <Icon type="md-hand" style="font-size: 20px;color: red"/>
        失败
      </div>
    </div>
    <div style="height: 65vh;">
      <Table ref="selection" :columns="columns" :data="data" border style="height: 92%">
        <template slot-scope="{ row, index }" slot="action">
          <Button type="primary" size="small" style="margin-right: 5px" @click="handleInfo(index)">详情</Button>
        </template>
      </Table>
    </div>
    <Modal v-model="visible" title="用例详情" width="60" @on-ok="ok" @on-cancel="cancel">
      <case-result/>
    </Modal>
  </Card>
</template>

<script>

const versionList = [
  {
    id: 1,
    name: "1212"
  },
  {
    id: 2,
    name: "1212"
  },
  {
    id: 3,
    name: "1212"
  },
  {
    id: 4,
    name: "1212"
  }
]
const columns = [
  {
    type: 'selection',
    width: 60,
    align: 'center'
  },
  {
    title: '用例名称',
    key: 'name'
  },
  {
    title: '接口名称',
    key: 'interface_name'
  },
  {
    title: '请求URL',
    key: 'interface_path'
  },
  {
    title: '请求方式',
    key: 'method'
  },
  {
    title: '响应状态码',
    key: 'status_code'
  },
  {
    title: '响应结果',
    key: 'response_body'
  },
  {
    title: '失败原因',
    key: 'fail'
  },
  {
    title: '测试结果',
    key: 'result_type'
  },
  {
    title: '操作',
    slot: 'action',
    width: 220,
    align: 'center'
  }
]
const data = [
  {
    name: "百度",
    url: 'www.baidu.com',
    method: 'POST',
    headers: {}
  }
]
export default {
  name: "case_report",
  components: {
    caseResult
  },
  data() {
    return {
      columns,
      versionList,
      data,
      visible: false,
      selectForm: {
        name: "",
        version: "",
        interface: "",
        create_user: "",
      }
    }
  },
  methods: {
    handleSelect() {
      console.log(this.selectForm)
    },
    handleInfo(id) {
      this.visible = true;
    },
    handleReset() {
      this.selectForm = {
        version: "",
        interface: "",
        create_user: "",
      };
    },
    ok() {
      this.$Message.info('Clicked ok');
    },
    cancel() {
      this.visible = false;
      this.$Message.info('Clicked cancel');
    }
  }
}
</script>

<style scoped>

</style>
